<template>
    <view class="select-box">
        <input class="select-input" :disabled="disabled" :focus="focusVal" type="text" :value="value" @focus="showPopup=true" @blur="inputBlur" @input="input" placeholder="请选择勋章类型" placeholder-style="#999">
		<!-- <view class="fuceng"></view> -->
        <view class="select-dropdown" :style="{'max-height': showPopup?'364rpx':'0'}">
            <view class="item-list">
                <view class="scroll-box">
                    <text class="arrow"></text>
                    <view class="item" :class="{active: item.name == value}" v-for="(item, index) in datalist" :key="index" @click="changeValue(item.name)">
                        <text>{{item.name}}</text>
                    </view>
					<view class="item" style="color: #999">可自定义勋章类型</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data(){
        return {
            showPopup: false, // 是否显示下拉框
            value: '', // 当前选择的值
            datalist: [], // 当前搜索到的列表
			focusVal: false
        }
    },
    props: {
        list: { // 传过来的数据列表
            type: Array,
            detault: () => {}
        },
		defaultValue: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		}
    },
    mounted(){
		this.datalist = this.list
		this.value = this.defaultValue
	},
    methods: {
		inputBlur(){
			setTimeout(() => {
				this.showPopup = false
			}, 200)
		},
        // 选择时触发
        changeValue(name){
            this.value = name;
            this.$emit('change', name)
        },
        // 输入时，返回搜索结果
        input(e){
            let value = e.detail.value
            this.datalist = this.list.filter(item => {
                return item.name.includes(value)
            })
            if(this.datalist.length==0 && value){
                this.datalist.push({name: value})
            }
        },
    }
}
</script>
<style lang="less" scoped>
    .select-box{
		height: 64rpx;
		position: relative;
		.select-input{
			padding-left: 40rpx;
			font-size: 30rpx;
		}
	}
	.fuceng{
		position: absolute;
		top: 0;
		width: 100%;
		height: 64rpx;
	}
	.scroll-box{
		position: relative;
		overflow-y: scroll;
		max-height: 340rpx;
		background: #fff;
		z-index: 999999;
	}
	.select-dropdown{
		margin-top: 20rpx;
		overflow: hidden;
		transition: all .1s;
	}
	.item-list{
		padding: 10rpx 0;
		width: 480rpx;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
		border: solid 2rpx #E4E7ED;
		border-radius: 20rpx;
		position: relative;
		.arrow{
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: solid;
			border-width: 12rpx;
			top: -12rpx;
			left: 70rpx;
			margin-right: 6rpx;
			border-top-width: 0;
			border-bottom-color: #EBEEF5;
			&::after{
				position: absolute;
				content: '';
				width: 0;
				height: 0;
				border-color: transparent;
				border-style: solid;
				border-width: 12rpx;
				top: 2rpx;
				margin-left: -12rpx;
				border-top-width: 0;
				border-bottom-color: #fff;
			}
		}
		.item{
			height: 68rpx;
			line-height: 68rpx;
			font-size: 28rpx;
			padding: 0 40rpx;
			&:hover{
				background: #F5F7FA;
			}
			&.active{
				background: #F5F7FA;
				color: #28C2CD;
			}
		}
	}
</style>